---
layout: default
title: "MarkSheet: a free HTML and CSS tutorial"
route: index
---

<section class="index-hello">
  <div class="index-hello-content">
    <hgroup class="hello">
      <h1>MarkSheet</h1>
      <h2>a free HTML and CSS tutorial</h2>
    </hgroup>

    <div id="hello" class="share-buttons">
      <div class="share-button--twitter">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://marksheet.io" data-text="MarkSheet: a free HTML and CSS tutorial" data-via="jgthms">Tweet</a>
      </div>
      <div class="share-button--facebook">
        <div class="fb-like" data-href="https://www.facebook.com/marksheet.io" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">Like</div>
      </div>
    </div>

    {% include carbon.html %}

    <a class="start" href="/introduction.html">
      Start reading
    </a>
  </div>
</section>

<section class="toc-head">
  <div class="container">
    <p class="toc-column--sections">
      <strong>4</strong> sections
    </p>

    <p class="toc-column--chapters">
      <strong>9</strong> chapters
    </p>

    <p class="toc-column--lessons">
      <strong>50</strong> lessons
    </p>
  </div>
</section>

{% include table-of-contents.html %}
